<template>
  <view class="pbox">
    <view class="bottm">
      <!-- 顶部 -->
      <view class="bttmbox">
        <view>
          <image
            class="logo_img"
            :src="`${store.imgDomain}login_logo.png`"
            mode="widthFix"
          />
          <view class="b1text">填写您的昵称、头像</view>
          <view class="b2text">提供具有辨识度的用户中心界面</view>
        </view>
      </view>
      <view class="inp_box">
        <!-- 输入框 -->
        <!-- 获取头像 -->
        <view class="inputs tx border_b">
          <button
            class="avatar-btn"
            open-type="chooseAvatar"
            @chooseavatar="onChooseAvatar"
          >
            <text>头像</text>
            <image
              v-if="avatarUrl"
              class="avatar"
              :src="avatarUrl"
              mode="	aspectFit"
            ></image>
            <text class="gethead" style="margin-left: 20rpx" v-else
              >获取头像</text
            >
          </button>
        </view>
        <!-- 获取昵称 -->
        <view class="inputs nc">
          <text>昵称</text>
          <input
            class="nicknameinp"
            type="nickname"
            v-model="nickname"
            placeholder="请输入昵称"
          />
        </view>
      </view>
      <!-- 保存按钮 -->
      <view class="btnbc" @click="bcFun">保存</view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { useCounterStore } from '@/store';

const store = useCounterStore();
// 头像
const avatarUrl = ref('');
// 昵称
const nickname = ref('');

const emit = defineEmits(['noShow', 'hadeorname']);

// 选择头像回调
const onChooseAvatar = (e) => {
  // e.detail.avatarUrl 是临时头像地址（本地临时文件）

  uni.uploadFile({
    url: 'https://adm.jinjiangservice.com/index.php/wxapp/common/uploadCommonImage',
    method: 'POST',
    filePath: e.detail.avatarUrl,
    formData: {
      file: e.detail.avatarUrl,
    },
    header: {
      'Content-Type': 'multipart/form-data',
    },
    name: 'file',
    success: (res) => {
      console.info(111, res);
      avatarUrl.value = JSON.parse(res.data).data.path;
    },
  });
  // 如需上传到服务器，可使用 uni.uploadFile
  // uploadAvatar(avatarUrl.value)
};
// 保存
const bcFun = () => {
  if (!avatarUrl.value) {
    uni.showToast({
      title: '请上传头像',
      icon: 'none',
    });
    return;
  }
  if (!nickname.value) {
    uni.showToast({
      title: '请输入昵称',
      icon: 'none',
    });
    return;
  }

  emit('hadeorname', { nickname: nickname.value, headimg: avatarUrl.value });
};
</script>

<style lang="scss" scoped>
.pbox {
  .bottm {
    width: 100%;
    box-sizing: border-box;
    padding: 40rpx 40rpx 120rpx;
    border-radius: 20rpx 20rpx 0 0;
    background-color: #f6f8fc;
    .bttmbox {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .b1text {
      font-size: 34rpx;
      font-weight: 700;
    }
    .b2text {
      font-size: 28rpx;
      color: $uni-text-color-grey;
    }
    .inputs {
      .avatar {
        width: 100rpx;
        height: 100rpx;
        margin-left: 20rpx;
        border-radius: 50%;
      }
      .avatar-btn {
        font-size: 30rpx;
        display: flex;
        align-items: center;
        width: 100%;
        padding: 20rpx 0;
        background-color: transparent;
        outline: none;
        &::after {
          display: none;
        }
      }
    }
  }
  .nc {
    padding: 30rpx 0;
    font-size: 30rpx;
    display: flex;
    align-items: center;
    .nicknameinp {
      flex: 1;
      box-sizing: border-box;
      padding-left: 20rpx;
    }
  }
}
.inp_box {
  margin-top: 40rpx;
  background-color: #fff;
  border-radius: 20rpx;
  box-sizing: border-box;
  padding: 20rpx;
}
.btnbc {
  width: 90%;
  margin: 0 auto;
  line-height: 90rpx;
  font-size: 30rpx;
  color: #fff;
  background-color: #007aff;
  border-radius: 45rpx;
  text-align: center;
  margin-top: 40rpx;
}
.gethead {
  color: $uni-text-color-grey;
}
.logo_img {
  width: 200rpx;
  margin-bottom: 20rpx;
}
</style>
